<template>
	<view class="indexBig">
		<view class="top">
			<u-icon name="arrow-left" size="36" @click="goToBack"></u-icon>
			<text>全部订单</text>
		</view>
		<!-- 搜索栏 -->
		<view class="searchBox">
			<u-icon name="search" size="42" color="#ccc"></u-icon>
			<u-input type="text" placeholder="搜索你想要的内容" v-model="storeName" confirm-type="search"
				@confirm="getMyOrderList"></u-input>
			<view class="">搜索</view>
		</view>
		<view class="allBox">
			<template v-if="orderList.length != 0">
				<view v-for="(item, index) in orderList" :key="index">
					<view class="list">
						<view class="listTop">
							<image :src="item.logo | getImg" mode=""></image>
							<view class="">{{ item.storeName }}</view>
							<view class="">{{ item.state }}</view>
						</view>
						<view class="content">
							<div class="imgContent"
								:style="{ width: (item.hcOrderDetailedList.length + 1) * 170 + 'rpx' }">
								<view class="foodContent" v-for="(foodItem, foodIndex) in item.hcOrderDetailedList"
									:key="foodIndex">
									<image :src="foodItem.productPicture | getImg" mode="aspectFill"></image>
									<text>{{ foodItem.tradeName }}X{{ foodItem.commodityQuantity }}</text>
								</view>
							</div>
						</view>
						<view class="warn">
							<view>¥{{ item.totalPrice }}</view>
							<view>共 {{ item.goodTotal }} 件</view>
						</view>

						<view class="" style="clear:both"></view>
					</view>
					<view class="orderInfo">取餐地址：{{ item.pickingAddress }}({{ item.supplyAddress }}) 取餐号：{{
						item.pickingSerialNo }}号</view>
					<view class="afterSales" v-if="item.afterSalesState == '未处理'">您已提交售后申请，请等待商家处理</view>
					<view class="bottom">
						<view class="">{{ item.createTime }}</view>
						<view class="">
							<!-- 取消订单 -->
							<u-button class="button" v-if="item.state === '已付款'" :loading="loadingCancel"
								@click="cancelOrderFun(item)">取消订单</u-button>
							<view class="button" @click="copyInfo(item)">复制订单</view>
							<view class="button" @click="showAddress(item)">取餐点图片</view>
							<view class="button"
								v-if="!item.afterSalesState && item.canAfterSales && item.state != '已取消'"
								@click="goToPage('afterSales', item)">申请售后</view>
							<view class="button" v-if="item.state == '已完成' && !item.afterSalesState"
								@click="goToPage('again', item.storeName)">再来一单</view>
							<view class="button" @click="goToPage('afterSalesSuccess', item.afterSalesId)"
								v-if="item.afterSalesState == '已处理' || item.afterSalesState == '已驳回'">
								{{ item.afterSalesState == '已处理' ? '售后已完成' : '售后被驳回' }}
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="empty" v-if="orderList.length == 0"><u-empty text="暂时还没有订单哦" mode="page"></u-empty></view>
		</view>
		<view class="addressImgContent">
			<u-popup v-model="showAddressImg" mode="top" :closeable="false" @touchmove.stop.prevent="">
				<view class="addressImgBox">
					<view class="title">{{ addressImgArr.length > 0 ? '取餐点展示' : '当前取餐点暂时没有图片' }}</view>
					<template v-if="addressImgArr.length > 0">
						<image :src="item" v-for="(item, index) in addressImgArr" :key="index" mode="widthFix"></image>
					</template>
					<u-empty text="没有找到相关数据" mode="page" v-if="addressImgArr.length == 0"></u-empty>
				</view>
			</u-popup>
		</view>
		<!-- <u-modal v-model="visiable" :content="orderDetInfo"></u-modal> -->
		<view class="warnBox" :class="{ warnBoxShow: warnShow }">
			<view class="">{{ warnText }}</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getMyOrderList, cancelOrder } from '@/utils/req/api.js';
import CommenHeader from '@/components/header/header.vue';
export default {
	components: {
		CommenHeader
	},
	data() {
		return {
			orderList: [],

			pageNo: 1,
			pageSize: 10,
			moreOrderFlag: false,
			storeName: '',

			showAddressImg: false,
			addressImgArr: [],

			// visiable: false,
			// orderDetInfo: '',

			warnShow: false,
			warnText: '',

			loadingCancel: false,
		};
	},
	onShow() {
		this.getMyOrderList();
	},
	methods: {
		goToBack() {
			let url = '/pages/my/my';
			uni.navigateTo({
				url: url
			});
		},
		//展示详细取餐地址
		showAddress(item) {
			console.log('item', item);
			let tempArr = [];
			if (item.supplyAddressImg) {
				tempArr = item.supplyAddressImg.split(',');
				tempArr.forEach(item => {
					if (item.indexOf('http') == -1) {
						item = getApp().globalData.BASE_IMG_URL + item;
					}
				});
			}
			this.addressImgArr = tempArr;
			this.showAddressImg = true;
		},
		async getMyOrderList(type) {
			uni.showLoading({ title: '加载中', mask: true })
			let res = await getMyOrderList({
				pageNo: 1,
				pageSize: this.pageNo * this.pageSize,
				storeName: this.storeName
			});
			uni.hideLoading()
			res.data.result.records.forEach(item => {
				let goodTotal = 0;
				item.hcOrderDetailedList.forEach(childItem => {
					goodTotal = goodTotal + childItem.commodityQuantity;
				});
				item.goodTotal = goodTotal;
				item.canAfterSales = new Date().getTime() - new Date(item.createTime).getTime() > 1000 * 60 * 60 * 24 ? false : true;
			});
			this.orderList = [];
			this.orderList = res.data.result.records;
		},
		async cancelOrderFun({ id }) {
			this.loadingCancel = true
			const { data = {} } = await cancelOrder({ id })
			this.loadingCancel = false
			const { success, message } = data
			const toastInfo = success ? {
				type: 'success',
				title: '取消成功',
			} : {
				type: 'warning',
				title: message,
			}
			this.$refs.uToast.show({
				...toastInfo,
				duration: 3000,
			})
			this.getMyOrderList()
		},
		goToPage(type, params) {
			let url;
			switch (type) {
				case 'afterSales':
					uni.setStorageSync('afterSaleWithOrderInfo', JSON.stringify(params));
					url = './afterSales';
					break;
				case 'afterSalesSuccess':
					url = `./feedback?id=${params}`;
					break;
				case 'again':
					url = `/pages/home/index?storeName=${params}`;
					// url = `/pages/index/index?storeName=${params}`;
					break;
			}
			uni.navigateTo({
				url
			});
		},
		copyInfo(item) {
			let tempUrl = uni.getStorageSync('isSpecial') ? 'https://www.yongshantuan.cn/#/bcwl' : 'https://www.yongshantuan.cn'
			uni.setClipboardData({
				data: `老板，我在用膳团下单了，送到记得通知我哦～\n${item.pickingSerialNo}号 ${item.nameDishes} ${item.pickingAddress}\n👇👇👇下单：\n${tempUrl}`,
				success: () => {
					//调用方法成功
					uni.hideToast();
					this.warnShow = true;
					this.warnText = '复制成功';
					setTimeout(() => {
						this.warnShow = false;
					}, 5000);
				}
			});
		}
	},
	onReachBottom() {
		if (!this.moreOrderFlag) {
			this.moreOrderFlag = true;
			if (this.orderList.length != 0 && this.orderList.length % 10 == 0) {
				this.pageNo = this.pageNo + 1;
				this.getMyOrderList('push');
				setTimeout(() => {
					this.moreOrderFlag = false;
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.indexBig {
	min-height: 100vh;
	background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
	background-size: 100vw 466rpx;
	background-repeat: no-repeat;
	background-color: #f5f5f5;
	padding: 40rpx 20rpx;
	padding-bottom: 150rpx;

	.top {
		position: relative;
		height: 40rpx;
		text-align: center;

		.u-icon {
			position: absolute;
			left: 0;
		}
	}

	.searchBox {
		margin: 10rpx auto;
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		@include flexs();

		image {
			width: 50rpx;
			height: 50rpx;
		}

		view {
			width: calc(28rpx * 2);
			font-size: 28rpx;
			line-height: 2;
			color: #f3b209;
			padding: 10rpx 0;
		}
	}

	.allBox {
		margin: 40rpx 0;

		>view {
			background-color: #fff;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			margin: 20rpx 0;
		}

		.list {
			position: relative;
			padding: 0 0 10px 0;
			text-align: center;

			&:last-child {
				border: 0;
			}

			.listTop {
				@include flexs();
				margin-bottom: 28rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					margin-right: 10rpx;
					border-radius: 16rpx;
					border: 1px solid #eee;
				}

				>view:nth-child(2) {
					flex: 1;
					font-size: 26rpx;
					font-weight: bold;
					text-align: left;
					margin-left: 10px;
				}

				>view:nth-child(3) {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.55);
				}
			}

			.content {
				width: 100%;
				overflow-x: auto;
				padding: 20rpx 0 0 0;
				position: relative;

				/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: #f5f5f5;
				}

				/*定义滚动条轨道内阴影+圆角*/
				&::-webkit-scrollbar-track {
					-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
					border-radius: 0;
					background-color: #f5f5f5;
				}

				/*定义滑块内阴影+圆角*/
				&::-webkit-scrollbar-thumb {
					border-radius: 0;
					-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
					background-color: #555;
				}

				.imgContent {
					width: 120000px;
					@include flexs();
				}

				.foodContent {
					width: 140rpx;
					font-size: 24rpx;
					line-height: 1.5;
					margin-right: 30rpx;

					text {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 100%;
						display: block;
					}

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
					}
				}
			}

			.warn {
				position: absolute;
				width: 180rpx;
				height: 140rpx;
				right: 0;
				top: 120rpx;
				background: linear-gradient(272.26deg, #ffffff 2.33%, rgba(255, 255, 255, 0.86) 76.83%, rgba(255, 255, 255, 0.63) 134.87%);
				@include flexs(center, center);
				flex-direction: column;

				>view:nth-child(1) {
					font-size: 36rpx;
					line-height: 1.5;
					font-weight: bold;
				}

				>view:nth-child(2) {
					font-size: 28rpx;
					line-height: 1.5;
					color: rgba(0, 0, 0, 0.55);
				}
			}

			.button {
				display: inline;
				padding: 0 20rpx;
				font-size: 24rpx;
				line-height: 2;
				color: #fa690a;
				border: 1px solid #fa690a;
				border-radius: 100rpx;
				float: right;
				margin: 20rpx 0 0 0;
				height: auto;

				&::after {
					border: none;
				}
			}
		}

		.afterSales {
			font-size: 28rpx;
			line-height: 2;
			text-align: left;
			color: #666;
			margin-top: 10px;
		}

		.orderTop {
			@include flexs(space-between, center);
			font-size: 14px;
			line-height: 2;

			>view {
				font-size: 14px;
				color: #666;
			}
		}

		.orderInfo {
			font-size: 28rpx;
			line-height: 1.5;
		}

		.bottom {
			@include flexs(space-between, center);
			padding: 10rpx 0 0 0;

			>view:nth-child(1) {
				font-size: 22rpx;
				line-height: 2;
				color: #666;
			}

			>view:nth-child(2) {
				@include flexs(flex-end, center);
			}

			.button {
				display: inline;
				padding: 0 15rpx;
				font-size: 24rpx;
				line-height: 2;
				color: #fa690a;
				border: 1px solid #fa690a;
				border-radius: 100rpx;
				margin-left: 10rpx;
				height: auto;

				&::after {
					border: none;
				}
			}
		}
	}

	.empty {
		background-color: #fff;
		border-radius: 10rpx;

		.u-empty {
			min-height: 50vh;
		}
	}

	.addressImgBox {
		@include flexs(center, center);
		flex-direction: column;
		padding: 20rpx 0;

		.title {
			font-size: 32rpx;
			line-height: 2;
			margin-bottom: 20rpx;
		}

		image {
			max-width: 100%;
			margin-bottom: 10rpx;
		}

		/deep/ {
			.u-empty {
				padding: 80rpx 0;
				background-color: #fff;
				width: calc(100% - 40rpx);
				margin: 0 auto;
				border-radius: 10rpx;
			}
		}
	}
}

.warnBox {
	width: 100%;
	height: 100vh;
	@include flexs(center, center);
	position: fixed;
	left: 0;
	top: 0;
	transition: all 0.2s;
	display: none;

	>view {
		width: 80%;
		height: 100rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 20rpx;
		color: #fff;
		@include flexs(center, center);
		padding: 80rpx 40rpx;
	}
}

.warnBoxShow {
	display: flex;
}
</style>

<style lang="scss">
.addressImgContent {
	/deep/.u-drawer-top {
		max-height: 80vh;
		overflow-y: scroll;
	}

	/deep/ {
		.u-drawer__scroll-view {
			max-height: 80vh;
		}
	}
}
</style>
